<template>
  <div class="conter">
    <!-- 第一屏 -->
    <div class="flatly-itemone">
      <!-- 轮播图 -->
      <div class="slideshow">
        <el-carousel
          trigger="click"
          @change="slideshow"
          style="200px"
          :interval="7000"
        >
          <el-carousel-item v-for="item in swiperdata" :key="item.id">
            <img :src="item.value" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="product">
        <div class="product-con">
          <div class="slideshow-item">
            <img
              src="https://img2.baidu.com/it/u=3823882177,3352315913&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              alt=""
            />
            <div class="slideshow-title">PC端</div>
            <div class="slideshow-introduce">
              路虽远行则将至，事虽难做则必成
            </div>
            <div class="slideshow-skip">立即使用</div>
          </div>
          <div class="slideshow-item">
            <img
              src="https://img2.baidu.com/it/u=3823882177,3352315913&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              alt=""
            />
            <div class="slideshow-title">桌面端</div>
            <div class="slideshow-introduce">
              路虽远行则将至，事虽难做则必成
            </div>
            <div class="slideshow-skip">立即使用</div>
          </div>
          <div class="slideshow-item">
            <img
              src="https://img2.baidu.com/it/u=3823882177,3352315913&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              alt=""
            />
            <div class="slideshow-title">小程序</div>
            <div class="slideshow-introduce">
              路虽远行则将至，事虽难做则必成
            </div>
            <div class="slideshow-skip">立即使用</div>
          </div>
          <div class="slideshow-item">
            <img
              src="https://img2.baidu.com/it/u=3823882177,3352315913&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              alt=""
            />
            <div class="slideshow-title">手机APP</div>
            <div class="slideshow-introduce">
              路虽远行则将至，事虽难做则必成
            </div>
            <div class="slideshow-skip">立即使用</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二屏 -->
    <div class="playground">
      <div class="animation-container">
        <!-- 视频 -->
        <div class="titlemanvideo">为什么要持续不断学习</div>
        <!-- 标题 -->
        <div class="titlemanifesto" v-if="titlemanifesto">
          用绝对的理智和清醒面对生活中的繁琐之事-風过无痕
        </div>
        <!-- <div class="titlemanifesto" v-if="titlemanifesto">
          生活意义-坦然面对生活并且接受她的事与愿违
        </div> -->
        <!-- data-order="0" 数字是控制每一项动画顺序 -->
        <div class="list">
          <div data-order="0" class="list-item">
            <div class="item" @click="floorPt">
              <img src="@/assets/images/楼层-copy-copy.svg" alt="" />
            </div>
            <p>楼层添加</p>
          </div>
          <div data-order="1" class="list-item">
            <div class="item" @click="lifecycle">
              <img src="@/assets/images/设备管理-copy-copy-copy.svg" alt="" />
            </div>
            <p>设备管理</p>
          </div>
          <div data-order="2" class="list-item">
            <div class="item">
              <img src="@/assets/images/楼层-copy-copy.svg" alt="" />
            </div>
            <p>楼层添加</p>
          </div>
          <div data-order="2" class="list-item">
            <div class="item">
              <img src="@/assets/images/楼层-copy-copy.svg" alt="" />
            </div>
            <p>楼层添加</p>
          </div>
          <div data-order="1" class="list-item">
            <div class="item">
              <img src="@/assets/images/楼层-copy-copy.svg" alt="" />
            </div>
            <p>楼层添加</p>
          </div>
          <div data-order="0" class="list-item">
            <div class="item">
              <img src="@/assets/images/楼层-copy-copy.svg" alt="" />
            </div>
            <p>楼层添加</p>
          </div>
          <div data-order="0" class="list-item">
            <div class="item">
              <img src="@/assets/images/楼层-copy-copy.svg" alt="" />
            </div>
            <p>楼层添加</p>
          </div>
          <div data-order="1" class="list-item">
            <div class="item">
              <img src="@/assets/images/楼层-copy-copy.svg" alt="" />
            </div>
            <p>楼层添加</p>
          </div>
          <div data-order="2" class="list-item">
            <div class="item">
              <img src="@/assets/images/楼层-copy-copy.svg" alt="" />
            </div>
            <p>楼层添加</p>
          </div>
          <div data-order="2" class="list-item">
            <div class="item">
              <img src="@/assets/images/楼层-copy-copy.svg" alt="" />
            </div>
            <p>楼层添加</p>
          </div>
          <div data-order="1" class="list-item">
            <div class="item">
              <img src="@/assets/images/楼层-copy-copy.svg" alt="" />
            </div>
            <p>楼层添加</p>
          </div>
          <div data-order="0" class="list-item">
            <div class="item">
              <img src="@/assets/images/楼层-copy-copy.svg" alt="" />
            </div>
            <p>楼层添加</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      animataionMap: new Map(),
      // 文字显示
      titlemanifesto: false,
      // 轮播图数据
      swiperdata: [
        {
          id: 1,
          value:
            'http://27.150.18.190:9000/mediafiles/2023/07/24/a1cc6db1eac18dd26462a539fc40b515.png'
        },
        {
          id: 2,
          value:
            'http://27.150.18.190:9000/mediafiles/2023/07/24/593678c3282cc510772c3ea0eadd3244.png'
        },
        {
          id: 3,
          value:
            'http://27.150.18.190:9000/mediafiles/2023/07/24/d990ec90ac137c0a5e529456b84857bb.png'
        },
        {
          id: 4,
          value:
            'http://27.150.18.190:9000/mediafiles/2023/07/24/33b3e7da323d4c10d315dadb68ad5606.png'
        },
        {
          id: 5,
          value:
            'http://27.150.18.190:9000/mediafiles/2023/07/24/3ce032b5dd020a470c7e6ba86e8a5480.png'
        }
      ]
    }
  },
  created() {},
  mounted() {
    this.updateMap(),
      this.updateStyle(),
      window.addEventListener('scroll', this.updateStyle)
  },
  methods: {
    // 轮播图切换了
    slideshow(e) {
      console.log('轮播图切换了', e)
      const product = document.querySelector('.product')
      if (e == 0) {
        console.log('直接获得')
        product.style.backgroundColor = '#2b285c'
      } else if (e == 1) {
        console.log('直接获得')
        product.style.backgroundColor = '#262626'
      } else if (e == 2) {
        console.log('直接获得')
        product.style.backgroundColor = '#4678f7'
      } else if (e == 3) {
        console.log('直接获得')
        product.style.backgroundColor = '#292b4c'
      } else {
        console.log('直接获得')
        product.style.backgroundColor = '#294aa3'
      }
    },
    // 得出动画节点数值
    createAnimation(scrollStart, scrollEnd, valueStart, valueEnd) {
      return (scroll) => {
        if (scroll <= scrollStart) {
          return valueStart
        }

        if (scroll >= scrollEnd) {
          return valueEnd
        }

        return (
          valueStart +
          ((valueEnd - valueStart) * (scroll - scrollStart)) /
            (scrollEnd - scrollStart)
        )
      }
    },

    getDomAnimation(scrollStart, scrollEnd, dom) {
      const list = document.querySelector('.list')
      scrollStart = scrollStart + dom.dataset.order * 300
      const opacityAnimation = this.createAnimation(
        scrollStart,
        scrollEnd,
        0,
        1
      )
      // 基于当前滚动计算得出的透明度
      const opacity = function (scroll) {
        return opacityAnimation(scroll)
      }

      const scaleAnimation = this.createAnimation(
        scrollStart,
        scrollEnd,
        0.3,
        1
      )

      const xAnimation = this.createAnimation(
        scrollStart,
        scrollEnd,
        list.clientWidth / 2 - dom.offsetLeft - dom.clientWidth / 2,
        0
      )
      const yAnimation = this.createAnimation(
        scrollStart,
        scrollEnd,
        list.clientHeight / 2 - dom.offsetTop - dom.clientHeight / 2,
        0
      )

      const transform = function (scroll) {
        return `translate(${xAnimation(scroll)}px,${yAnimation(
          scroll
        )}px)  scale(${scaleAnimation(scroll)})`
      }

      return {
        opacity,
        transform
      }
    },

    updateMap() {
      const items = document.querySelectorAll('.list-item')
      const playGround = document.querySelector('.playground')
      this.animataionMap.clear()
      const playGroundRect = playGround.getBoundingClientRect()
      // 开始动画的距离
      const scrollStart = playGroundRect.top + window.scrollY
      // 结束动画的距离  相当于playground的高度
      const scrollEnd =
        playGroundRect.bottom + window.scrollY - window.innerHeight
      for (const item of items) {
        this.animataionMap.set(
          item,
          this.getDomAnimation(scrollStart, scrollEnd, item)
        )
      }
      // 打开遮罩层
      // this.listmsk = true
    },

    updateStyle() {
      const scroll = window.scrollY
      // 获取元素-改变背景颜色
      const list = document.querySelector('.list')
      // 获取p标签
      const pobj = document.getElementsByTagName('p')
      // console.log('p', p)
      if ((scroll > 2100 && scroll < 2968) || scroll < 1849) {
        console.log('打开遮罩层')
        list.style.backgroundColor = 'rgba(23, 26, 29, 0.9)'
        for (var i = 0; i < pobj.length; i++) {
          pobj[i].style.opacity = '1'
        }
        // 显示文字
        this.titlemanifesto = true
      } else {
        console.log('关闭遮罩层')
        list.style.backgroundColor = '#063868'
        // 隐藏文字
        this.titlemanifesto = false
        for (var i = 0; i < pobj.length; i++) {
          pobj[i].style.opacity = '0'
        }
      }
      console.log('scroll', scroll)
      for (let [dom, value] of this.animataionMap) {
        for (const cssProp in value) {
          dom.style[cssProp] = value[cssProp](scroll)
        }
      }
    },
    // 楼层
    floorPt() {
      this.$router.push('/floorPt')
    },
    // 设备生命周期管理
    lifecycle() {
      this.$router.push('/lifecycle')
    }
  }
}
</script>
<style lang="scss" scoped>
.conter {
  // scrollbar-width: none !important;
  // cursor: pointer;
  // overflow-y: auto;
  // ::-webkit-scrollbar {
  //   // 隐藏滚动条
  //   display: none; /* Chrome Safari */
  // }
  // min-height: 300vh;
  .flatly-itemone {
    height: 90vh;
    background-color: #fff;
    // opacity: 1;
    // background-image: url(~@/assets/images/thgykj.png);
    // background-size: 100% 100%; //设置背景图片的大小
    .slideshow {
      height: 68vh;
      background-color: skyblue;
      ::v-deep .el-carousel__container {
        height: 68vh !important;
        .el-carousel__item {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          &:nth-child(2n) {
            background-color: #3ea3ff;
          }
          &:nth-child(2n-1) {
            background-color: #4577f7;
          }
          img {
            width: auto !important;
            display: inline-block;
            height: 100%;
          }
        }
      }
    }
    .product {
      height: 22vh;
      background-color: #2b285c;
      display: flex;
      justify-content: center;
      align-items: center;
      .product-con {
        width: 1205px;
        height: 145px;
        // background-color: #fff;
        border-radius: 5px;

        display: flex;
        justify-content: space-between;
        .slideshow-item {
          width: 288px;
          height: 145px;
          padding: 16px 0 0 24px;
          border-radius: 5px;
          border: 1.5px solid #fff;
          // background-color: yellow;
          background-color: hsla(0, 0%, 100%, 0.8);
          cursor: pointer;
          background-image: linear-gradient(
            115deg,
            rgba(206, 225, 246, 0.8) 0px,
            rgba(90, 148, 207, 0.3) 50%,
            rgba(210, 211, 212, 0) 100%
          );
          box-shadow: 0 20px 40px 0 rgba(23, 26, 29, 0.04);
          position: relative;
          z-index: 2;
          transform: all 0.3s linear !important;
          &:hover {
            transform: all 0.3s linear !important;
            img {
              opacity: 1;
              transform: scale(1.1);
              z-index: -1;
            }
          }
          img {
            display: inline-block;
            width: 90px;
            height: 90px;
            position: absolute;
            right: 15px;
            bottom: 10px;
            opacity: 0;
            transform: scale(0.7);
          }
          .slideshow-title {
            font-family: PingFangSC-Medium;
            font-size: 20px;
            font-weight: 500;
          }
          .slideshow-introduce {
            color: rgba(32, 34, 36, 0.8);
            font-size: 14px;
            margin-bottom: 18px;
            margin-top: 10px;
          }
          .slideshow-skip {
            -webkit-box-pack: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            -webkit-box-align: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            background-color: hsla(0, 0%, 100%, 0.4);
            border: 1px solid hsla(210, 7%, 53%, 0.24);
            -webkit-border-radius: 6px;
            border-radius: 6px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            font-weight: 400;
            height: 32px;
            -webkit-justify-content: center;
            justify-content: center;
            width: 76px;
            font-size: 13px;
            line-height: 32px;
          }
        }
      }
    }
  }
  .playground {
    height: 310vh;
    background-color: #063868;
    position: relative;
    .animation-container {
      display: flex;
      position: sticky;
      top: 0;
      height: 100vh;
      text {
        z-index: 999;
        color: red;
      }
      // 视频
      .titlemanvideo {
        height: 20px;
        color: #3d88d9;
        position: absolute;
        left: 50%;
        top: 15%;
        transform: translate(-50%);
      }
      // 标题
      .titlemanifesto {
        height: 50px;
        width: 1000px;
        position: absolute;
        left: 50%;
        top: 23%;
        transform: translate(-50%);
        // background-color: skyblue;
        text-align: center;
        color: #fff;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 30px;
        line-height: 50px;
      }
      .list {
        height: 550px;
        width: 1000px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -28%);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-radius: 10px;
        padding: 15px 20px;
        // background-color: rgba(23, 26, 29, 0.9);
        // background-color: skyblue;
        // background-image: linear-gradient(#16181c, #15181b);
        opacity: 0.8;
        .list-item {
          width: 80px;
          height: 155px;
          border-radius: 10px;
          // background-color: #fff;
          // background-color: skyblue;
          margin: 50px 39px;
          display: flex;
          flex-direction: column;
          // justify-content: center;
          align-items: center;
          &:hover {
            cursor: pointer;
            .item {
              opacity: 0.6;
            }
          }
          .item {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #246fff;
            // &:nth-child(2n) {
            //   background-color: #246fff;
            // }
            // &:last-child {
            //   background-color: rgb(111, 245, 111) !important;
            // }
            // &:nth-child(2) {
            //   background-color: orange;
            // }
          }
          p {
            color: #ffffff;
            font-size: 20px;
            font-family: ' PingFangSC-Medium';
            // opacity: 0;
          }
        }
      }
    }
  }
}
</style>